<template>
  <div>
    <h1>{{ item.title }}</h1>
    <button @click="remove(item.id)">删除</button>
  </div>
</template>

<script>
import {
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated
} from 'vue';

export default {
  name: 'Test',
  props: {
    item: Object
  },
  setup(props, ctx) {
    const remove = (id) => {
      ctx.emit('remove', id);
    }

    onBeforeUnmount(() => { // 组件卸载前
      console.log('onBeforeUnmount: ID为' + props.item.id);
    })

    onUnmounted(() => { // 组件卸载后
      console.log('onUnmonted: ID为' + props.item.id);
    })

    onActivated(() => { // 组件被激活时
      console.log('onActivated', props.item.id);
    })

    onDeactivated(() => { // 比如从 A 组件，切换到 B 组件，A 组件消失时执行
      console.log('onDeactivated', props.item.id);
    })

    return {
      remove
    }
  }
}
</script>

<style>

</style>